// react 处理
import "./home.scss";
import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams,
} from "react-router-dom";

// 函数组件
function Home() {
  return <h2>Home</h2>;
}
// 函数组件
function About() {
  return <h2>About</h2>;
}
// 子组件
function Topics() {
  let match = useRouteMatch();
  console.log(match, "===");
  // isExact: true
  // params: {}
  // path: "/topics"
  // url: "/topics"
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${match.url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
        </li>
        <li>
          <Link to={`${match.url}`}>Props v. State</Link>
        </li>
      </ul>

      {/* The Topics page has its own <Switch> with more routes
          that build on the /topics URL path. You can think of the
          2nd <Route> here as an "index" page for all topics, or
          the page that is shown when no topic is selected */}

      <Switch>
        <Route path={`${match.path}/:topicId`}>
          <Topic />
        </Route>
        <Route path={match.path}>
          <h3>Please select a topic.</h3>
        </Route>
      </Switch>
    </div>
  );
}

function Topic() {
  let { topicId } = useParams();
  return <h3>Requested topic ID: {topicId}</h3>;
}

class home extends React.Component {
  // 继承
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    console.log(this.props, "======reoutes");
    return (
      <div>
        <div>子路由路由</div>
        <Router>
          <div>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/home/about">About</Link>
              </li>
              <li>
                <Link to="/topics">Topics</Link>
              </li>
            </ul>

            {/* 路由显示的地方 */}
            <Switch>
              <Route path="/home/about">
                <About />
              </Route>
              <Route path="/topics">
                <Topics />
              </Route>
              <Route path="/">
                <Home />
              </Route>
            </Switch>
          </div>
        </Router>
      </div>
    );
  }
}

export default home;
